<div id="insure-records">
    <div style="margin:10px;height: 32px;">
        <div style="position: relative;width: 250px;line-height:32px;" class="fl">
            <div class="search-wrapper" v-click-outside.capture="onClickOutside">
                <i-input v-model.trim="sosoValue" icon="ios-close-circle-outline" @on-click="cleanSelectedUser" @on-change="searchValueChange" @on-blur="blur" @on-focus="focus" :disabled="disabled" @on-click="focus" :placeholder="placeholder"></i-input>
                <transition name="fade">
                    <div class="search-item-wrapper" v-show="isShowMatchDev">
                        <Tree :data="treeData" @on-check-change="onCheckedDevice"></Tree>
                    </div>
                </transition>
            </div>
        </div>
        <div style="margin-left:10px;position: relative;width: 70px;" class="fl">
            <i-select v-model="isFilter">
                <i-option value="2">{{$t("reportForm.all")}}</i-option>
                <i-option value="1">{{$t("reportForm.aeviewed")}}</i-option>
                <i-option value="0">{{$t("reportForm.notReviewed")}}</i-option>
            </i-select>
        </div>
        <div style="margin-left:10px;" class="fl">
            <date-picker type="daterange" :value="dateVal" :editable="false" :clearable="false" @on-change="onChange" show-week-numbers style="width:200px" placement="bottom-start"></date-picker>
        </div>
        <div style="margin-left: 10px;" class="spans-wrap fl">
            <span class="cursor-pointer" @click="handleSelectdDate(0)" :style="{color: dayNumberType == 0 ? '#2D8CF0' : '#515A6E'}">{{$t("reportForm.toDay")}}</span> <b>｜</b>
            <span class="cursor-pointer" @click="handleSelectdDate(1)" :style="{color: dayNumberType == 1 ? '#2D8CF0' : '#515A6E'}">{{$t("reportForm.yesterDay")}}</span> <b>｜</b>
            <span class="cursor-pointer" @click="handleSelectdDate(3)" :style="{color: dayNumberType == 3 ? '#2D8CF0' : '#515A6E'}">{{$t("reportForm.threeDays")}}</span>
        </div>
        <div style="margin-left:10px;" class="fl">
            <i-button @click="queryInsures" :loading="loading">{{$t("reportForm.query")}}</i-button>
        </div>
        <div style="margin-left:20px;" class="fl">
            <i-input v-model.trim="exactValue" :placeholder="$t('reportForm.insurePlaceholder')"></i-input>
        </div>
        <div style="margin-left:10px;" class="fl">
            <i-button @click="exactQueryInsures" :loading="loading">{{$t("reportForm.exactSearch")}}</i-button>
        </div>
        <div class="rt">
            <i-button @click="exportData" type="primary">{{$t("reportForm.exportData")}}</i-button>
        </div>
    </div>
    <div style="margin:10px;">
        <i-table :columns="columns" size="small" border ref="table" :height="tableHeight" :data="tableData" :loading="loading"></i-table>
    </div>
    <div style="padding-left:10px;">
        <Page :total="total" show-total @on-change="changePage" :page-size="20" :current="currentIndex" />
    </div>
    <Modal v-model="modal" width="500">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="ios-create-outline"></Icon>
            <span>{{$t("monitor.ownerInfo")}}</span>
        </p>
        <div style="text-align:center">
            <Row style="margin:10px 0;">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("reportForm.name")}} : &nbsp;</i-col>
                <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                    <i-input v-model.trim="editObjectRow.name" style="width: 100%;"></i-input>
                </i-col>
            </Row>
            <Row style="margin:10px 0;">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("reportForm.idNumber")}} : &nbsp;</i-col>
                <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                    <i-input v-model.trim="editObjectRow.cardid" style="width: 100%;"></i-input>
                </i-col>
            </Row>
            <Row style="margin:10px 0;">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;"> {{$t("monitor.phoneNumber")}} : &nbsp;</i-col>
                <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                    <i-input v-model.trim="editObjectRow.phonenum" style="width: 100%;"></i-input>
                </i-col>
            </Row>
            <Row style="margin:10px 0;">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("reportForm.vinno")}} : &nbsp;</i-col>
                <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                    <i-input v-model.trim="editObjectRow.vinno" style="width: 100%;"></i-input>
                </i-col>
            </Row>
            <Row style="margin:10px 0;">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("reportForm.distributorPhone")}} : &nbsp;</i-col>
                <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                    <i-input v-model.trim="editObjectRow.usernamephonenum" style="width: 100%;"></i-input>
                </i-col>
            </Row>
            <Row style="margin:10px 0;">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("reportForm.examine")}} : &nbsp;</i-col>
                <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                    <Checkbox v-model="editObjectRow.isRecharge"></Checkbox>
                </i-col>
            </Row>
            <Row style="margin:10px 0;">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;"> {{$t("reportForm.addDate")}} : &nbsp;</i-col>
                <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                    <date-picker type="date" v-model="editObjectRow.createtime" :clearable="clearable"></date-picker>
                </i-col>
            </Row>
        </div>
        <div slot="footer">
            <i-button type="primary" style="width: 100%" @click="handleEditInsure">{{$t("header.submit")}}</i-button>
        </div>
    </Modal>
</div>